<template>
	<div class = "wrap">
		<swiper :options="swiperOption" v-if = "showSwiper"  ref = "wrap">
		    <swiper-slide v-for = "item of swiperList" :key = "item.id">
		    	<img :src="item.imgUrl" alt="">
		    </swiper-slide>
		    <div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
	export default {
		name:'homeSwiper',
		props:["swiperList"],
		data () {
			return {
				swiperOption :{
					pagination:".swiper-pagination",
					loop:true,
					autoplay:3000,
					disableOnInteraction: false,
				},
			}
		},
		computed:{
			showSwiper (){
				return this.swiperList.length;
			}
		}
 	}
</script>

<style scoped lang = "less">
	.wrap /deep/ .swiper-pagination-bullet-active {
		background:#fff;
	} 
	.wrap {
	width:100%;
 	overflow: hidden;
	height:0;
	padding-bottom:31.25%; 
	background:#eee;  
		.swiper-slide {
			img {
				display: block;
				width:100%;
			}
		}
	}

</style>